<template>
  <div class="wrap" v-loading="planDataLoading">
    <div class="content">
      <div class="type-box">
        <el-radio-group v-model="currentForm.type" @change="changeType">
          <el-radio-button
            v-for="item in showPlanTypeList"
            :key="item.value"
            :label="item.label"
          >
            {{item.text}}
          </el-radio-button>
        </el-radio-group>
      </div>
      <div class="plan-content">
        <div class="tips">确认发货信息后开始为本次发货添加货件单，可添加多个</div>
        <div class="title">发货信息</div>
        <shipping-plan-form
          :warehouse-list="warehouseList"
          :current-form="currentForm"
          :transfer-type-list="transferTypeList"
          :fl-warehouse-list="flWarehouseList"
        ></shipping-plan-form>
        <div style="margin-left: 120px">
          <el-button type="primary" @click="addShipment">添加货件</el-button>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import {getAddPlanData} from "@/api/shippingPlan";
import {MW_TYPE_BC, MW_TYPE_WC, PLAN_TYPE_FL, PLAN_TYPE_MW} from "@/utils/shippingPlan";
import addShippingPlanMixin from "@/views/shipment/mixin/addShippingPlanMixin";
import FlWarehouseItem from "@/views/shipment/components/FlWarehouseItem.vue";
import WarehouseItem from "@/views/shipment/components/WarehouseItem.vue";
import ShippingPlanForm from "@/views/shippingPlan/components/ShippingPlanForm.vue";

export default {
  name: 'addShippingPlan',
  components: {ShippingPlanForm},
  mixins: [addShippingPlanMixin],
  watch: {
    showPlanTypeList(){
      const params = this.$route.params;
      if(!params.type){
        this.currentForm.type = this.showPlanTypeList[0].label
      }
    }
  },
  data(){
    return {
      currentForm: {
        planName: '',
        type: PLAN_TYPE_FL,
        makeContainerType: 1, // 装柜方式
        flWarehouseId: 0,
        warehouseId: 0,
        transferType: '', // 运输类型
        deliverDate: '', // 预计送达时间
        moveWarehouseType: MW_TYPE_BC, // 移仓类型
        containerNo: '', // 货柜号
        haveLogisticsNo: true, // 是否有物流单号
      },
    }
  },
  created() {
    const params = this.$route.params;
    if(params.type){
      this.currentForm.type = params.type
    }
    // console.log(this.showPlanTypeList)
  },
  methods: {
    MW_TYPE_WC() {
      return MW_TYPE_WC
    },
    PLAN_TYPE_MW() {
      return PLAN_TYPE_MW
    },
    PLAN_TYPE_FL() {
      return PLAN_TYPE_FL
    },
    finishWarehouseApi(){
      this.initForm()
    },
    initForm(){
      if(this.flWarehouseList.length > 0){
        this.currentForm.flWarehouseId = this.flWarehouseList[0].id
      }
      if(this.warehouseList.length > 0){
        this.currentForm.warehouseId = this.warehouseList[0].id
      }
      if(this.transferTypeList.length > 0){
        this.currentForm.transferType = this.transferTypeList[0].transferType
      }
    },
    changeType(){
      // console.log(this.currentForm)
      if(this.currentForm.type === PLAN_TYPE_FL){
        this.currentForm.makeContainerType = 1
      }else{
        this.currentForm.makeContainerType = 0
      }
    },
    // 添加货件
    addShipment(){
      if(!this.currentForm.warehouseId){
        this.$eMsg('请选择海外收货仓库')
        return;
      }

      this.$router.push({
        name: 'addShipment',
        params: this.currentForm
      })
    }
  }

}
</script>

<style scoped lang="scss">
.wrap{
  padding: 10px 30px;
  .content{
    padding: 20px 0 0;
    .type-box{
      border-bottom: #DFE6ED 1px solid;
      padding-bottom: 10px;
      margin-bottom: 10px;
    }
    .plan-content{
      .tips{
        font-size: 14px;
        color: #AAAAAA;
        //font-weight: bold;
      }
      .title{
        font-size: 18px;
        font-weight: bold;
        margin: 20px 0;
      }
    }
    .radio-content{
      display: flex;
      margin-bottom: 15px;
    }
  }
}
</style>
